<template>
  <div class="container">
    <navbar :title="webTitle" theme="light" :leftItemClose="canGoBack" :rightItemIcon="true" :left-back="false"
            @leftItemClick="goBack" @rightItemClick="reloadPage">
      <template slot="rightItemIcon">&#xe6a4;</template>
    </navbar>
    <web :src="url" @pagefinish="pageLoaded" @receivedtitle="receivedTitle" ref="webpage" class="webview"></web>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .webview {
    position: fixed;
    top: 130px;
    bottom: 0;
    right: 0;
    left: 0;
  }
</style>
<script>

let api = require('./include/api')
let webview = weex.requireModule('webview')
require('./include/page-xdom')
let queryparser = require('./include/queryparser')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
let platform = require('./include/platform')
module.exports = {
  mixins: [],
  components: {
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      url: '',
      title: '',
      canGoBack: false
    }
  },
  computed: {
    webTitle () {
      return this.title.substring(0, 6)
    }
  },
  created () {
    var options = queryparser(weex.config.bundleUrl)
    this.title = options.title || ''
    let list = []
    if (options.url) {
      this.url = decodeURIComponent(options.url)
      return
    }
    if (options.code) {
      let tmps = options.code.split('?')
      list.push('code=' + tmps[0])
      if (tmps.length > 1) {
        list.push('params=' + tmps[1])
      }
    }
    this.url = api.url.webpage() + '?' + list.join('&')
    // modal.alert({message: JSON.stringify(this.url)})
    if (platform.isAndroid()) {
      this.title = this.title || '辣小客'
      this.canGoBack = true
    }
  },
  methods: {
    goBack () {
      if (!this.canGoBack) {
        navigator.pop()
      } else {
        webview.goBack(this.$refs.webpage)
      }
    },
    pageLoaded (e) {
      this.title = e.title
      this.canGoBack = e.canGoBack
    },
    receivedTitle (e) {
      this.title = e.title
      this.canGoBack = e.canGoBack
    },
    reloadPage () {
      webview.reload(this.$refs.webpage)
    }
  }
}
</script>
